<template>
  <div>
    <BasicTable @register="registerTable" :beforeEditSubmit="beforeEditSubmit">
      <!-- 表格工具栏按钮-->
      <template #toolbar>
        <a-button type="primary" @click="openImportTable"> 导入表 </a-button>
        <a-button type="error" @click="deleteTables"> 批量删除 </a-button>
      </template>

      <!-- 按钮区 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                icon: 'ant-design:sync-outlined',
                tooltip: '同步表结构',
                onClick: syncTable.bind(null, record),
              },
              {
                icon: 'uil:setting',
                tooltip: '配置',
                onClick: openSetting.bind(null, record),
              },
              {
                icon: 'ant-design:coffee-outlined',
                tooltip: '生成java代码',
                onClick: generateServerCode.bind(null, record),
              },
              {
                icon: 'ant-design:desktop-outlined',
                tooltip: '生成页面代码',
                onClick: generateServerCode.bind(null, record),
              },
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: deleteTable.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>

    <ImportTable @register="registerImportTable" :afterClose="reload" />

    <GenJavaModal ref="genJavaModalRef" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction, BasicColumn, FormSchema, StatusTagRender } from '@/components/Table';

  import { useMessage } from '@/hooks/web/useMessage';
  import { pager, deleteById, batchDelete, sync, update } from '@/api/toolkit/tableConfig';
  import { javaServiceModuleList } from '@/api/toolkit/project';

  import GenJavaModal from './genJavaModal.vue';

  import ImportTable from './importTable.vue';

  import { useModal } from '@/components/Modal';
  import { ref } from 'vue';

  // 路由
  import { useGo } from '@/hooks/web/usePage';

  const go = useGo();

  // 自定义组件名称, 默认为文件名
  defineOptions({ name: 'Server' });

  const [registerImportTable, { openModal: openImportTable }] = useModal();

  const genJavaModalRef = ref<any>(null);

  const { createMessage } = useMessage();

  // 搜索面板
  const searchFormSchema: FormSchema[] = [
    {
      field: 'className',
      label: '表名',
      component: 'Input',
      colProps: { span: 6 },
    },
    {
      field: 'comment',
      label: '注释',
      component: 'Input',
      colProps: { span: 6 },
    },
    {
      field: 'moduleName',
      label: '所属模块',
      component: 'Input',
      colProps: { span: 6 },
    },
  ];

  // 表格列
  const columns: BasicColumn[] = [
    {
      title: '表名',
      dataIndex: 'tableName',
      width: 120,
      align: 'left',
    },
    {
      title: '注释',
      dataIndex: 'comment',
      width: 150,
      align: 'left',
    },
    {
      title: '数据库',
      dataIndex: 'schemaName',
      width: 150,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 150,
      customRender: ({ record }) => StatusTagRender(record.status),
    },
    {
      title: '所属模块',
      dataIndex: 'moduleName',
      width: 200,
      align: 'left',
      edit: true,
      editComponent: 'ApiSelect',
      editComponentProps: {
        api: javaServiceModuleList,
        labelField: 'serviceName',
        valueField: 'serviceName',
      },
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 120,
    },
  ];

  // 表格
  const [registerTable, { reload, getSelectRowKeys }] = useTable({
    title: '生成配置',
    api: pager,
    columns,
    // 搜索框配置: 是否打开搜索框、搜索框配置
    useSearchForm: true,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    // 表格配置:
    showTableSetting: true, // 是否显示设置按钮
    bordered: true, // 是否包含边框
    showIndexColumn: false, // 是否包含索引列
    rowKey: 'id',
    rowSelection: {
      type: 'checkbox',
    },
  });

  async function deleteTable(record: Recordable) {
    await deleteById(record.id);
    createMessage.success('删除生成成功');
    reload();
  }

  async function syncTable(record: Recordable) {
    console.log('同步表结构');
    await sync(record.id);
    createMessage.success('表结构同步成功');
  }

  async function deleteTables() {
    let ids: any[] = getSelectRowKeys();
    if (ids.length <= 0) {
      createMessage.warn('未选择记录');
      return;
    }

    let resp = await batchDelete(ids);
    createMessage.success('成功删除' + resp + '条记录');
    await reload();
  }

  async function generateServerCode(record: Recordable) {
    genJavaModalRef.value!.open(record);
  }

  // 更新
  async function beforeEditSubmit({ record, index, key, value }) {
    let obj = {};
    obj[key] = value;
    console.log('准备更新...', value);

    await update(record.id, obj);
  }

  function openSetting(record: Recordable) {
    console.log('record:', record);

    go('/developer/server/settings/' + record.id);
  }
</script>
